<script setup lang="ts">
import dayjs from 'dayjs';
import { reactive, onMounted } from 'vue';
import { getCurrentInstance } from '@tarojs/taro';
import { MY_DETAIL } from '/@/api/modules/visitor/visitor-appointment-open-api';
import { getSysImgUrl } from '/@/utils/index';
import { Desensitized } from '/@/utils/desensitized';
import { VisitorAppointmentDetailState } from './index.d';

/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as unknown as {
  id: string;
};

const state = reactive<VisitorAppointmentDetailState>({
  startTime: undefined,
  endTime: undefined,
  purpose: '',
  list: [],
  tip: '加载中...',
  acceptPopupIsShow: false,
  rejectPopupIsShow: false,
  auditOpinion: '',
  auditStatus: undefined,
  cancelStatus: undefined,
  signOut: undefined,
  signIn: undefined,
});

onMounted(() => {
  MY_DETAIL({ id: params.id })
    .then((res) => {
      state.startTime = res.startTime;
      state.endTime = res.endTime;
      state.purpose = res.purpose;
      state.list = res.content;
      state.auditStatus = res.auditStatus;
      state.cancelStatus = res.cancelStatus;
      state.signOut = res.signOut;
      state.signIn = res.signIn;
      state.tip = '';
    })
    .catch((err) => {
      state.tip = err.comResp.tip || err.comResp.err;
    });
});
</script>

<template>
  <view class="visitor-appointment-detail app-page--1">
    <app-navbar title="预约详情" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="visitor-appointment-detail__wrapper">
        <nut-form v-if="state.startTime" class="visitor-appointment-detail__form">
          <nut-form-item label="预计来访时间" label-align="left">
            <view>
              {{ state.startTime ? dayjs(state.startTime).format('YYYY-MM-DD HH:mm:ss') : '-' }}
            </view>
          </nut-form-item>
          <nut-form-item label="预计离开时间" label-align="left">
            <view>
              {{ state.endTime ? dayjs(state.endTime).format('YYYY-MM-DD HH:mm:ss') : '-' }}
            </view>
          </nut-form-item>
          <nut-form-item label="来访事由" label-align="left">
            <view>{{ state.purpose || '-' }}</view>
          </nut-form-item>
        </nut-form>

        <nut-form
          v-for="item in state.list"
          :key="item.id"
          class="visitor-appointment-detail__form"
        >
          <nut-form-item label="姓名" label-align="left">
            <view class="visitor-appointment-detail__name-wrapper">
              <view class="visitor-appointment-detail__name-wrapper--left">
                {{ item.personName || '未填写' }}
              </view>
              <nut-tag v-if="item.attentionPerson === 1" type="danger">重点人员</nut-tag>
            </view>
          </nut-form-item>
          <nut-form-item label="性别" label-align="left">
            <view>{{ item.sex ? { 1: '男', 2: '女' }[item.sex] : '未填写' }}</view>
          </nut-form-item>
          <nut-form-item label="联系电话" label-align="left">
            <view>{{ Desensitized.desensitizedPhone(item.phone) || '未填写' }}</view>
          </nut-form-item>
          <nut-form-item label="身份证" label-align="left">
            <view>{{ Desensitized.desensitizedIdNo(item.idNo) || '未填写' }}</view>
          </nut-form-item>
          <nut-form-item label="车牌号" label-align="left">
            <view>{{ item.carNo || '未填写' }}</view>
          </nut-form-item>
          <nut-form-item label="单位" label-align="left">
            <view>{{ item.visitorWorkUint || '未填写' }}</view>
          </nut-form-item>
          <nut-form-item label="头像照片" label-align="left">
            <image
              v-if="item.fileUrl"
              class="visitor-appointment-detail__avatar"
              :src="getSysImgUrl(item.fileUrl || '')"
            />
            <view v-else>未上传</view>
          </nut-form-item>
        </nut-form>
      </view>

      <view class="app-page__list-tips">
        <text v-if="state.tip">{{ state.tip }}</text>
        <text v-if="!state.tip && (!state.startTime || !state.endTime)"
          >访客暂未上传信息，请稍后查看</text
        >
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
